<template>
  <n-card :border="false">
    <n-alert :show-icon="false" class="m-b-10">
      <n-form :model="searchParam" class="search-forms"
              inline
              :show-feedback="false"
              label-placement="left"
              @keydown.enter.prevent="handleSubmitSearch">
        <n-form-item label="标题">
          <n-input v-model:value="searchParam.key" placeholder="请输入标题查询" style="width:230px"
                   clearable/>
        </n-form-item>
        <n-form-item label="状态">
          <n-select v-model:value="searchParam.status" :options="statusOption" style="width: 130px;" clearable/>
        </n-form-item>
        <n-form-item>
          <search-button-group @submit="handleSubmitSearch"
                               @reset="()=>(searchParam.key=null,searchParam.status=null)"/>
        </n-form-item>
      </n-form>
    </n-alert>
  </n-card>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import SearchButtonGroup from '@components/SearchButtonGroup';
import {SelectOption} from "naive-ui";

const statusOption = ref<SelectOption[]>([
  {
    label: '正常',
    value: 0,
  }, {
    label: '停用',
    value: 1,
  }
])
const searchParam=ref({
  key:null,
  status:null,
})
//数据表
const data_list = ref<any>();
const handleSubmitSearch = () => {
  data_list.value.searchListData();
}

</script>
<style scoped lang="scss">

</style>